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CSS Syntax Colors 


selector -pseudoslement [atv] | [1 Renan 


Hexadecimal: #4169E1; > #46E; | with alpha channel 
property|: El 


RGB model: RGB(65,105,225); RGB(65,105,225, 0.5); 
HSL model: HSL(225,71%,88%); HSL(225,71%,88%, 0.5); 
Backgrounds 


background-color: [color]; color: [color]; Tables 
background-image: url(image.jpg); 
background-repeat: 
background-attachment: 


background-position: [pos-x] [pos-y]; 


packground: [09 Emer ead CCE 


border-collapse: 
border-spacing: [size]; 
caption-side: 
empty-cells: 
table-layout: 


font-family: [font1], [font2], [font3], ... : 


serif | sans-serif | cursive | fantasy | monospace 


font-size: |size] 


Font (aligments and spacing) 


letter-spacing: [size]; 
line-height: [size]; FRED 
text-indent: [size]: 
word-spacing: [size]; 


Fonts (variants) 


font-variant: 
text-decoration: ei 


text-transform: fia 


font-style: 
font-weight: | 100-900) 


font: 


Elements (types) 
display: 


white-space: 


elt dates 

outline-color: [color]: 
outline-style: [style]: 
outline-width: [size]; 


outline: Se EN IEIETID 


tab-size: [size]; 
text-align: 
vertical-align: [size] 






visibility: 


Mouse cursors 
cursor: url(image.png) 


Displacement z-index: 


float: GR 
clear: Gita 


list-style-image: url(image.png); Geigy 
list-style-position: 


list-style-type: eit 


ET gelfatcar-lavem ex-velellatets 


margin/padding: *-top 
margin/padding: Fy) fiend sia [ein | x-left 
margin/padding: FFs eisene | *-right 
margin/padding: 


list-style: 
*-bottom 
Position types 

position: 
top/right/bottom/left: [size] 


clip-path: url(shape.svg) BRERA ERY 
overflow: 


solid 
dotted 
dashed 
double 


Ts groove 
— 
sine 
a esa column-rule-width: [size]; 


25.4mm 10mm 4.23mm_ 0.35mm_ |column-rule-style: [style]; 
HT column-rule-color: [color]: 


eTolacelarmatcdale lin 1cm 1pc 1mm 1pt 
& P 7 column-rule: Bieiiy Evy Cela 
| padding column-gap: [size]; iil 


column-span: [number];EqJ 
column-fill: 


border-color: [color]; 
border-width: [size]; 
border-style: [style]; 


porder: RIT) ENS Gs 


Meyer: dle) ats 


border-top-* 
border-right-+ 
border-bottom-« 
border-left-+ 


fore) (Ulan a css 


column-width: [size]; 
column-count: [number]; ER 


columns: 


top-left Columns separator 


top-right 





bottom-left 








Dimensions 
max-width: [size]; Heit 
min-width: [size]; Gata 
width: [size] Ey 


bottom 








border 






t margin 





Enezets ri 
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background-image: -webkit- © @ 
linear-gradient((dir], [col], [col2]...); leg : -moz- Se 
radial-gradient([shape] [size] at [pos], [col1], [col2], ...); 35dea -ms- (A 
repeating-linear-gradient(...); yy ; 
repeating-radial-gradient(...); 


Created by @Manz ( | http://www.emezeta.com/ 





eTrevel(=Vai es 


15d @media print { 
text-shadow: [pos-x] [pos-y] [blur] [color]; ay , propiedad : valor; 


-sh - - | ; 
box-shadow: [pos-x] [pos-y] [blur] [size] [color]; ey @media screen { 


Shadows or backgrounds Radial gradient (Options) propiedad : valor; 


ee url(back1.png), url(back2.png), - etna | @media screen and 
ackground-repeat: no-repeat, repeat-x, ...; size: [size (max-width: 640px) 


pos: * uid ovis 
} 


background-clip: 


background-origin: 

background-size: |[size-w] [size-h]; 

background: a IeeIcMcINeM on) | | Cron race ee dette 
font-family: 'Open Sans’; size: [width] [height]; 

Round borders CSS3 font-weight: 300; 

border-radius: border-top-left-* sre: local(‘Open Sans’), margin: [...] 

border-radius: border-top-right-* url(file.ttf) format(‘truetype’), orphans: [number]; 


border-radius: border-bottom-left-+ url(file.woff) format(‘woff’); } widows: [number]; } 
border-bottom-right-* 


Typograph CSS3 aeelellarclileya 





http: //fonts.googleapis.com/css? fami Ly=OpentSans : 300 , 400 | Roboto: 400 





Borders with images Fonts CSS3 
border-image- outset: [size] font-stretch: Rotation 2D 
border-image-repeat: transform: rotateX(deg_x); 
border-image-slice: transform: rotateY (deg_y); 
border-image-source: url(image.png) transform: rotate(deg); 
border-image-width: [size] 

| | text-overflow: [text]: 
border-image: ten-hadile Scale 20 















font-size-adjust: [number] ERR transform: scaleX(x); 
transform: scaleY(y); 


transform: scale(x, y); 






Transitions 


transition- property: [css-property]; EC) Ey | Mubbammaebibehic ie 
transition-duration: [time], transform: translate3d(x, y, Z); 


transition-timing-function: [timing-function]|| t'ansform: translateZ(z), 
transition-delay: [time]; transform: scale3d(x, y, Z); 


transform: scaleZ(z); 
transition: [STII 


transform: rotate3d(x,y,z,deg); 
Transformaciones 


CSS Filters 











filter-func 


grayscale: [0...1] 
blur: [size] 
sepia: [0...1] 


Translation 2D 
transform: translateX(x); 
transform: translateY(y); 


transform: rotateZ(deg), transform: translate(x, y); 


transform: perspective(n); 
transform-origin: [pos-x] [pos-y] [pos-z]; transform: matrix3d(n,n,n....) 


transform-style: — . 
idvanliace fail lareqiceya 


Animations (0.25, 0.1, 0.25, 1) 
(0.00, 0.0, 1.00, 1) 
(0.42, 0.0, 1.00, 1) 
(0.00, 0.0, 0.58, 1) 
(0.42, 0.0, 0.58, 1) 


saturate: [0...1] 
opacity: [0...1] 
brightness: [0...1] 
contrast: [0...1] 
hue-rotate: [deg] 
invert: [0...1] 










transform: skewX(deg_x); 
transform: skewY(deg_y); 


filter: f1(n) £2(n) ...) | transform: skew(deg, deg); 
: 


Keyframes @-vendor-keyframes 



















animation-name: [name]; 
animation-duration: [time]; 
animation-timing-function: —> 
animation-delay: [time]: 
animation-iteration-count: [number]: 
animation-direction: 
animation-fill-mode: fia 
animation-play-state: 


animation: 














@keyframes nameanimation { 
0% { propiedad: valor } 


100% { propiedad: valor } 
0% = from 
100% = to| Z 


} 


